<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="index.css"/>
	</head>
	<body>
		<div class="a1">
			<div class="a2">
				<div class="a3"><div style="font-size: 20px;">Redmik50</div></div>
				<span>|</span>
				<a style="color: #666666;">Redmik50电竞版</a>
				<a href="../个人中心.html" style="margin-left:100px ;text-decoration: none;color: black;">个人中心</a>
				<div class="a4">概述页 | 参数页 | F码通道 | 质询客服 | 用户评价</div>
			</div>
		</div>
		<div class="a5">
			<div class="box">
				<table border="1px" width="1100px" height="300px">
					<tr align="center" height="50px">
						<th>商品信息</th>
						<th>单价(元)</th>
						<th>数量</th>
						<th>小计(元)</th>
						<th>操作</th>
					</tr>
					<tr align="center">
						<td class="photo"><div class="picture"><img src="../images/pms_1647430877.29028369.png"></div>
							<p>Redmi K50 <p style="display: inline-block;" class="n9">8GB+128GB</p>
							<p style="display: inline-block;" class="n10">墨羽</p></p>
						</td>
						<td class="n6">￥1899</td>
						<td>
							<input type="button" id="reduce" value="-">
							<input type="text" value="1" id="a2" readonly>
							<input type="button" id="add" value="+">
						</td>
						<td>￥<p style="display: inline-block;" class="price">1899</p></td>
						<td>删除</td>
					</tr>
					<tr>
						<td colspan="5" style="height: 50px; text-align: center;">共计<p style="display: inline-block;"
						class="n8">1</p>件商品 总金额 ￥
						<p class="n7" style="display: inline-block;">1899</p></td>
					</tr>
					<tr>
						<td><input type="submit" value="关闭" class="close"></td>
						<td colspan="4">
							<a href="../gouwu.html"><input type="submit" value="立即结算" class="money"></a></td>
					</tr>
				</table>
			</div>
			<div class="a6">
				<div class="banner">
					<ul id="imglist">
						<li><img src="../images/pms_1647430877.29028369.png" ></li>
						<li><img src="../images/pms_1647430877.28041893.png" ></li>
						<li><img src="../images/pms_1647430877.28091875.png" ></li>
						<li><img src="../images/pms_1647430877.28446726.png" ></li>
						<li><img src="../images/pms_1647430877.29028369.png" ></li>
					</ul>
					<div class="button1">《</div>
					<div class="button2">》</div>
				</div>
			</div>
			<div class="a7">
				<p style="font-size: 25px;font-weight: bold;
				padding-top: 20px;padding-left: 10px;">Redmi k50</p>
				<p style="padding-right: 150px;padding-left: 10px;padding-top: 10px;"><a style="color: red;">「至高优惠230元；10点、20点整点购机前150名赢小米定制T恤；
				享6期免息；信用卡分期至高优惠200元」</a>
				<a style="color: #666666;">天玑8100｜67W快充｜5500mAh大电池｜2K超清直屏｜像素加倍｜清晰加倍｜VC液冷散热｜OIS光学防抖｜杜比视界｜索尼4800万像素相机</a></p>
				<p style="padding-top: 20px;padding-left: 10px;color: red;">小米自营</p>
				<div>
					<p class="n1" style="padding-top: 20px;padding-left: 10px;color: red;font-size: 20px;
					 display: inline-block;">1899元</p> <del class="n1" style="font-size: 15px;
				color: #999999;">2099元</del></div>
				<div class="a8"></div>
				<div class="a10">
					<div class="a9">优惠券</div>
					<a class="b1">30元优惠券 (部分版本可用)</a>
					<a href="" class="b2">立即领取</a>
				</div>
				<div class="b3"></div>
				<div class="b4">
					<p style="margin-left: 50px;margin-top: 30px;">北京 &nbsp;北京市 &nbsp;海淀区 &nbsp;清河街道 &nbsp;
					<a style="color: red;">修改</a> <br><a style="color: red;">有现货</a></p>
				</div>
					<h3 style="margin-left: 10px;margin-top: 15px;">选择版本</h3>
					<div class="b5">
						<div class="b6" >8GB+128GB</div>
						<div class="b6" >12GB+512GB</div>
					</div>
					<div class="b7">
						<div class="b8" >8GB+256GB</div>
						<div class="b8" >12GB+256GB</div>
					</div>
					<h3 style="margin-left: 10px;margin-top: 15px;">选择颜色</h3>
					<div class="b9">
						<div class="b10">墨羽</div>
						<div class="b10">幻镜</div>
					</div>
					<div class="c1">
						<div class="c2">幽芒</div>
						<div class="c2">银迹</div>
					</div>
						<div class="c3">晴雪</div>
						<div class="c4">
							<div class="c5">Redmi K50 <p style="display: inline-block;" class="n3">12GB+256GB</p> <p style="display: inline-block;" class="n4">墨羽</p></div>
							<p class="c5 n2">1899元</p><del style="color: #666666;" class="n2" >2099元</del>
							<div style="font-size: 25px;color: red;margin-top: 20px;margin-left: 70px;">总计：<p style="display: inline-block;" class="n5">1899</p>元</div>
						</div>
						<div class="c6">
							<input type="submit" value="立即购买" id="rightnow">
						<form action="../ceshi.php" style="display:inline-block;">
							<input style="width: 300px;" type="submit" name="name" value="购物车">
						</form>
						</div>
						<div class="c7">
							<p><img src="../images/微信图片_20220611155716.png" >小米自营</p>
							<p><img src="../images/微信图片_20220611155716.png" >小米发货</p>
							<p><img src="../images/微信图片_20220611155716.png" >7天无理由退货</p>
							<p><img src="../images/微信图片_20220611155716.png" >运费说明</p>
							<p><img src="../images/微信图片_20220611155716.png" >企业信息</p>
						</div>
			</div>
		</div>
		<div class="c8">
			<h2>价格说明</h2>
			<p>划线价：商品展示的划横线价格为参考价，该价格可能是商品首次上市销售价、品牌专柜标价、商品吊牌价或由品牌供应商提供的正品零售价(如厂商指导价、建议零售价等)或该商品在小米商城管经展示过的销售价；
			由于地区、时间的差异性和市场行情的波动，品牌专柜标价、商品吊牌价等可能会与您购物时展示的不一致，该价格并非原价、仅供参考。</p>
			<p>未划线价：指商品的实时销售价格，其不因表述的差异改变性质。但商品具体结算价格可能因该商品参与的满减、预售、限时优惠等单个或多个活动，或者因使用优惠券、红包、
			米金等而发生变化，最终请以订单结算页展示为准。</p>
			<p>其他：商品详情页(含主图)以图片或文字形式标注的到手价、券后价、众筹价、尝鲜价等价格可能是商品在使用优惠券或参与特定优惠活动或在特定时间段等情形下，
			由系统根据相应规则计算得出的预估单品结算价格。具体请以订单结算页面的标价、优惠条件或具体活动规则为准</p>
		</div>
		<div class="c9">
			<p><img src="../images/微信图片_20220613091122.png" >预约维修服务</p>
			<p><img src="../images/微信图片_20220613174046.png" >7天无理由退货</p>
			<p><img src="../images/微信图片_20220613174050.png" >15天免费换货</p>
			<p><img src="../images/微信图片_20220613174053.png" >满69元包邮</p>
			<p><img src="../images/微信图片_20220613174056.png" >520余家售后网点</p>
			<div class="c10"></div>
		</div>
		<div class="d1">
			<img src="../images/微信图片_20220613095654.png" >
			<p class="d2">小米商城 | MIUI | 米家 | 米聊 | 多看 | 游戏 | 政企服务 | 小米天猫店 | 小米集团隐私政策 | 小米公司儿童信息保护规则 | 小米商城隐私政策 | 小米商城用户协议 | 问题反馈 | Select Location
				北京互联网法院法律服务工作站 | 中国消费者协会 | 北京市消费者协会</p>
				<div class="d3">
					<p>© mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2020]0276-042号</p>
					<p>（京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京)-非经营性-2014-0090 营业执照 医疗器械质量公告</p>
					<p>增值电信业务许可证 网络食品经营备案 京食药网食备202010048   食品经营许可证</p>
					<p>违法和不良信息举报电话：171-5104-4404 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
				
				</div>
				<p class="d4">让全球每个人都能享受科技带来的美好生活</p>
		</div>
		<script>
		var buttom1 = document.querySelector('.button1');
		var buttom2 = document.querySelector('.button2');
		var left = 0;
		var timer;
		var imglist = document.getElementById('imglist')
		function run (){
			if(left <= -2400){
				left = 0;
			}
			imglist.style.marginLeft = left + 'px';
			var n = (left % 600 == 0) ? n = 2000: n = 10;
			left -= 10;
			timer = setTimeout(run,n);
		}
		run();
		function imagechange(n){
			let li = -(n*600);
			imglist.style.marginLeft = li + 'px';
			left = li;
		}
		buttom1.onclick = function(){
			let button1 = Math.floor(-left / 600) -1;
			if(button1 == -1){
				button1 = 3;
			}
			imagechange(button1);
			// imagechange(0);
		}
		buttom2.onclick = function(){
			let button2 = Math.floor(-left / 600) +1;
			if(button2 == 4){
				button2 = 0;
			}
			imagechange(button2);
		}
		</script>
		<script>
		var one = document.getElementsByClassName('b6');
		// console.log(one);;
		var n1 = document.getElementsByClassName('n1');
		var two = document.getElementsByClassName('b8');
		var n2 = document.getElementsByClassName('n2');
		var n3 = document.getElementsByClassName('n3');
		var three = document.getElementsByClassName('b10');
		var four = document.getElementsByClassName('c2');
		var five = document.getElementsByClassName('c3');
		var n4 = document.getElementsByClassName('n4');
		var n5 = document.getElementsByClassName('n5');
		var n6 = document.getElementsByClassName('n6');
		var picture = document.getElementsByClassName('picture');
		var price = document.getElementsByClassName('price');
		var n7 = document.getElementsByClassName('n7');
		var n8 = document.getElementsByClassName('n8');
		var n9 = document.getElementsByClassName('n9');
		var n10 = document.getElementsByClassName('n10');
		var money = document.getElementsByClassName('money');
		// console.log(n2);
		one[0].style.border = '1px solid red';
		one[0].style.color = 'red';
		n3[0].innerHTML ='8GB+128GB';
		three[0].style.border = '1px solid red';
		three[0].style.color = 'red';
		// console.log(n1);
			one[0].onclick = function(){
				n1[0].innerHTML = '1899元';
				n1[1].innerHTML = '2099元';
				n2[0].innerHTML = '1899元';
				n2[1].innerHTML = '2099元';
				n3[0].innerHTML ='8GB+128GB';
				n5[0].innerHTML = '1899';
				n6[0].innerHTML = '1899';
				price[0].innerHTML = '1899';
				n9[0].innerHTML = '8GB+128GB';
				n7[0].innerHTML = price[0].innerHTML;
				for(let i=0 ; i<2 ; i++){
					one[i].style.border = '1px solid black';
					one[i].style.color = '#666666';
					two[i].style.border = '1px solid black';
					two[i].style.color = '#666666';
				}
				one[0].style.border = '1px solid red';
				one[0].style.color = 'red';
				i= 1;
				text.value = 1;
				
			}
			one[1].onclick = function(){
				n1[0].innerHTML = '2099元';
				n1[1].innerHTML = '2299元';
				n2[0].innerHTML = '2099元';
				n2[1].innerHTML = '2299元';
				n3[0].innerHTML ='12GB+512GB';
				n5[0].innerHTML = '2099';
				n6[0].innerHTML = '2099';
				price[0].innerHTML = '2099';
				n9[0].innerHTML = '12GB+512GB';
				n7[0].innerHTML = price[0].innerHTML;
				for(let i=0 ; i<2 ; i++){
					one[i].style.border = '1px solid black';
					one[i].style.color = '#666666';
					two[i].style.border = '1px solid black';
					two[i].style.color = '#666666';
				}
				one[1].style.border = '1px solid red';
				one[1].style.color = 'red';
				i= 1;
				text.value = 1;
			}
			two[0].onclick = function(){
				n1[0].innerHTML = '2299元';
				n1[1].innerHTML = '2499元';
				n2[0].innerHTML = '2299元';
				n2[1].innerHTML = '2499元';
				n3[0].innerHTML ='8GB+256GB';
				n5[0].innerHTML = '2299';
				n6[0].innerHTML = '2299';
				price[0].innerHTML = '2299';
				n9[0].innerHTML = '8GB+256GB';
				n7[0].innerHTML = price[0].innerHTML;
				for(let i=0 ; i<2 ; i++){
					one[i].style.border = '1px solid black';
					one[i].style.color = '#666666';
					two[i].style.border = '1px solid black';
					two[i].style.color = '#666666';
				}
				two[0].style.border = '1px solid red';
				two[0].style.color = 'red';
				i= 1;
				text.value = 1;
			}
			two[1].onclick = function(){
				n1[0].innerHTML = '2499元';
				n1[1].innerHTML = '2699元';
				n2[0].innerHTML = '2499元';
				n2[1].innerHTML = '2699元';
				n3[0].innerHTML ='12GB+256GB';
				n5[0].innerHTML = '2499';
				n6[0].innerHTML = '2499';
				price[0].innerHTML = '2499';
				n9[0].innerHTML = '12GB+256GB';
				n7[0].innerHTML = price[0].innerHTML;
				for(let i=0 ; i<2 ; i++){
					one[i].style.border = '1px solid black';
					one[i].style.color = '#666666';
					two[i].style.border = '1px solid black';
					two[i].style.color = '#666666';
				}
				two[1].style.border = '1px solid red';
				two[1].style.color = 'red';
				i= 1;
				text.value = 1;
			}
			three[0].onclick = function(){
				n4[0].innerHTML = '墨羽';
				n10[0].innerHTML = '墨羽';
				for(var i = 0 ; i <2 ; i++){
					three[i].style.border = '1px solid black';
					three[i].style.color = '#666666';
					four[i].style.border = '1px solid black';
					four[i].style.color = '#666666';
				}
				for(var i = 0 ; i<1; i++){
					five[i].style.border = '1px solid black';
					five[i].style.color = '#666666';
				}
				three[0].style.border = '1px solid red';
				three[0].style.color = 'red';
				picture[0].innerHTML = '<img src="../images/pms_1647430877.29028369.png">';
				// picture[0].innerHTML = '';
			}
			three[1].onclick = function(){
				n4[0].innerHTML = '幻镜';
				n10[0].innerHTML = '幻镜';
				for(var i = 0 ; i <2 ; i++){
					three[i].style.border = '1px solid black';
					three[i].style.color = '#666666';
					four[i].style.border = '1px solid black';
					four[i].style.color = '#666666';
				}
				for(var i = 0 ; i<1; i++){
					five[i].style.border = '1px solid black';
					five[i].style.color = '#666666';
				}
				three[1].style.border = '1px solid red';
				three[1].style.color = 'red';
				picture[0].innerHTML = '<img src="../images/pms_1647430877.28091875.png">';
			}
			four[0].onclick = function(){
				n4[0].innerHTML = '幽芒';
				n10[0].innerHTML = '幽芒';
				for(var i = 0 ; i <2 ; i++){
					three[i].style.border = '1px solid black';
					three[i].style.color = '#666666';
					four[i].style.border = '1px solid black';
					four[i].style.color = '#666666';
				}
				for(var i = 0 ; i<1; i++){
					five[i].style.border = '1px solid black';
					five[i].style.color = '#666666';
				}
				four[0].style.border = '1px solid red';
				four[0].style.color = 'red';
				picture[0].innerHTML = '<img src="../images/pms_1647430877.28446726.png ">';
			}
			four[1].onclick = function(){
				n4[0].innerHTML = '银迹';
				n10[0].innerHTML = '银迹';
				for(var i = 0 ; i <2 ; i++){
					three[i].style.border = '1px solid black';
					three[i].style.color = '#666666';
					four[i].style.border = '1px solid black';
					four[i].style.color = '#666666';
				}
				for(var i = 0 ; i<1; i++){
					five[i].style.border = '1px solid black';
					five[i].style.color = '#666666';
				}
				four[1].style.border = '1px solid red';
				four[1].style.color = 'red';
				picture[0].innerHTML = '<img src="../images/pms_1647430877.28041893.png">';
			}
			five[0].onclick = function(){
				for(var i = 0 ; i <2 ; i++){
					three[i].style.border = '1px solid black';
					three[i].style.color = '#666666';
					four[i].style.border = '1px solid black';
					four[i].style.color = '#666666';
				}
				for(var i = 0 ; i<1; i++){
					five[i].style.border = '1px solid black';
					five[i].style.color = '#666666';
				}
				n4[0].innerHTML = '晴雪';
				n10[0].innerHTML = '晴雪';
				five[0].style.border = '1px solid red';
				five[0].style.color = 'red';
				picture[0].innerHTML = '<img src="../images/OIP-C.jfif">';
			}
			var i = 1;
			var add = document.getElementById('add');
			var reduce = document.getElementById('reduce');
			var text = document.getElementById('a2');
			// var price = document.getElementsByClassName('price');
			add.addEventListener('click', function() {
				i++;
				text.value = i;
				// console.log(i);
				 price[0].innerHTML = i * 1899;
				if(n6[0].innerHTML == "1899"){
					price[0].innerHTML = i *1899;
				}
				if(n6[0].innerHTML == "2099"){
					price[0].innerHTML = i *2099;
				}
				if(n6[0].innerHTML == "2299"){
					price[0].innerHTML = i *2299;
				}
				if(n6[0].innerHTML == "2499"){
					price[0].innerHTML = i *2499;
				}
				n7[0].innerHTML = price[0].innerHTML;
				n8[0].innerHTML = i;
			})
			reduce.addEventListener('click', function() {
				i--;
				text.value = i;
				console.log(i);
				if (i < 1) {
					i = 1;
					text.value = 1;
				}
				 price[0].innerHTML = i * 1899;
				if(n6[0].innerHTML == "1899"){
					price[0].innerHTML = i *1899;
				}
				if(n6[0].innerHTML == "2099"){
					price[0].innerHTML = i *2099;
				}
				if(n6[0].innerHTML == "2299"){
					price[0].innerHTML = i *2299;
				}
				if(n6[0].innerHTML == "2499"){
					price[0].innerHTML = i *2499;
				}
				n7[0].innerHTML = price[0].innerHTML;
				n8[0].innerHTML = i;
			})
			
			// money[0].onclick = function(){
			// 	alert('恭喜你钱被我骗了!!!!!!!');
			// }
			var rightnow = document.getElementById('rightnow');
			var box = document.getElementsByClassName('box');
			var close = document.getElementsByClassName('close');
			// console.log(box);
			console.log(close);
			rightnow.addEventListener('click',function(){
				box[0].style.display = 'block';
			})
			close[0].addEventListener('click',function(){
				box[0].style.display = 'none';
				// price[0].innerHTML = '1899';
				n7[0].innerHTML = n6[0].innerHTML;
				price[0].innerHTML = n6[0].innerHTML;
				n8[0].innerHTML = 1;
				// n6[0].innerHTML = '1899';
				i = 1;
				text.value = 1;
			})
		</script>
	</body>
</html>